<template>
  <div class="container-search">
    <p>输入搜索</p>
    <el-input
    placeholder="输入用户昵称......"
    v-model="input"
    clearable>
    </el-input>

    <!-- 时间 -->
    <div class="block">
    <span class="demonstration">上次消费时间</span>
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="开始日期">
    </el-date-picker>
  </div>
<div class="line"></div>
  <div class="block">
    <el-date-picker
      v-model="value2"
      type="date"
      placeholder="结束日期">
    </el-date-picker>
  </div>

  <!-- 按钮 -->
  <el-button type="primary" @click="searchName">查询</el-button>
  <el-button @click="openDialog">添加</el-button>
  <el-button type="info" @click="deleteAll">批量删除</el-button>
  </div>
</template>

<script>
import eventBus from '../../../untial/evevtBus'
export default {
    data() {
      return {
        input: '',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }          
        },
        value1: '',
        value2: '',
      }
    },
    methods: {
      openDialog(){
        this.$emit('parentDialog')
      },
      searchName(){
        // console.log(this.input);
       this.$emit('searchParent',this.input)
      },
      deleteAll(){
          eventBus.$emit('deleteAllTable')
      }
    },
  }

</script>

<style lang="less" scoped>
.container-search{
    display: flex;
    height: 64px;
    width: 100%;
    color:#333333 ;
    background: rgba(255,255,255,0.4);
    padding: 16px 30px;
    margin-bottom: 20px;
    p{
        margin-right: 8px;     
        font-size: 16px;
        line-height: 32px;
        font-weight: bold;
    }
    .el-input{
        width: 200px;
        margin-right: 30px;
        border-radius: 10px;
       /deep/.el-input__inner{ 
        border-radius: 5px;       
        height: 32px;
        font-size: 12px;
        padding: 16px 12px;
         &::placeholder {
            color:#333333;
         }
       }
    }
   .block{
    /deep/.demonstration{
        margin-right:8px;
         font-size: 16px;
        color:#333333;
        font-weight: bold;
    }
    .el-input{
        width: 150px;
        margin-right: 16px;
       /deep/.el-input__inner{        
        height: 32px;
        font-size: 12px;
        padding: 16px 28px;
         &::placeholder {
            color:#333333;
         }
       }
    }
   }
   .line{
        width: 20px;
        height: 2px;
        background: #eef1f5;
        margin-top: 15px;
        margin-right: 16px;
    }
    .el-button--primary{
        margin-left: 18px;
        margin-right: 30px;
        height: 32px;
        padding: 0 24px;
        background: #438afe;
        /deep/span{
            font-size: 16px;
            font-weight: bold;
            color:#fff;          
        }
    }
    .el-button--default{
        height: 32px;
        padding: 0 20px;
        margin-right: 30px;
        /deep/span{
            font-size: 16px;
            font-weight: bold;
            color:#333333;          
        }       
    } 
    .el-button--info{
      padding: 0 24px;
      /deep/span{
        font-size: 16px;
        font-weight: bold;
      }
      
    } 
}

</style>